<template>
  <div class="container" @click.stop="showLanguage = false">
    <div class="page_content container-tt">
      <header class="flex_between">
        <div class="headLogo">
          <nuxt-link to="/cs">
            <div class="flex_">
              <img
                src="/static/logo.svg"
                class="img"
                alt="logo"
                width="34"
                height="34"
              />
              <span class="projectName">SavingTik</span>
            </div>
          </nuxt-link>
        </div>
        <div class="headTabs flex_">
          <!-- <div class="tItem">
            <nuxt-link to="/cs">
              <div @click="goToTop('video')">TikTok Downloader</div>
            </nuxt-link>
          </div> -->
          <div class="tItem">
            <nuxt-link to="/cs/download-tiktok-mp3">
              <div @click="goToTop('mp3')">Stáhněte si TikTok MP3</div>
            </nuxt-link>
          </div>
          <div class="tItem tItemBlod bor">
            <nuxt-link to="/cs/download-tiktok-story">
              <div @click="goToTop('story')">Stáhněte si TikTok Story</div>
            </nuxt-link>
          </div>
          <language ref="languageRef"></language>
        </div>
        <div class="drawer" @click="showAppRightHandel">
          <img src="/static/menu.png" class="img" alt="menu" />
        </div>
      </header>
      <div class="banner_box flex_center">
        <div class="banner flex_ccenter">
          <h1 class="h1">Stáhněte si TikTok Story</h1>
          <!-- <h2 class="h2">- Tiktok Downloader, Without Watermark. Fast. -</h2> -->
        </div>
      </div>
      <div class="downloadInput flex_center">
        <div class="inputBox flex_between">
          <input
            type="text"
            v-model="input"
            @keydown="sendDownload($event)"
            @input="handleInput"
            @paste="handleInput"
            class="ipt"
            placeholder="Sem vložte odkaz TikTok"
            :disabled="isHttpLoading"
          />
          <div
            class="clearx flex_ccenter"
            v-if="input != ''"
            @click.stop="input = ''"
          >
            <img src="/static/clear.png" class="img" alt="" />
          </div>
          <div
            class="downBtn shou flex_ccenter"
            :class="isHttpLoading ? 'isHttpLoading' : ''"
            @click.stop="Download"
          >
            <div class="downImg">
              <img src="/static/download.webp" class="img" alt="download" />
            </div>
            <div class="iptbtn">Stáhnout</div>
          </div>
          <div class="posi shou" v-if="input != ''" @click.stop="input = ''">
            <img src="/static/clear.png" class="img" alt="" />
          </div>
        </div>
      </div>
      <div class="downStorySuccess" v-if="downStorySuccess">
        <div class="storyVideoInfo flex_between">
          <div class="downLeft flex_">
            <img :src="downData.avatar" class="img" alt="" />
            <div class="flex_column info">
              <div class="text1">
                {{ downData.title }}
              </div>
              <div class="text2">{{ downData.nickname }}</div>
            </div>
          </div>
          <div class="downBtn flex_ccenter shou" @click="allIn">
            Stáhnout vše
          </div>
        </div>
        <div class="storyImageList flex_between">
          <div class="item" :key="k" v-for="(item, k) in downData.images">
            <client-only>
              <el-image
                style="width: 100%; height: 100%"
                fit="cover"
                :src="item"
                :preview-src-list="downData.images"
              >
              </el-image>
            </client-only>
            <div class="overlay">
              <div
                class="posi shou flex_center"
                @click="handleDownload(item, 'SavingTik-Image', 'image')"
              >
                <img
                  src="/static/download.webp"
                  class="xiazai"
                  alt="download"
                />
                <div>Stáhnout fotografii</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="downSuccess flex_center" v-if="downSuccess">
        <div class="success_box">
          <div class="_video flex_between">
            <div class="bigImg flex_ccenter">
              <img :src="downData.cover" class="img" alt="" />
            </div>
            <div class="downInfo flex_column">
              <div class="info_1 flex_between">
                <div class="tit flex_">
                  <div class="timg">
                    <img
                      src="/static/blue.webp"
                      class="img"
                      alt="blue square"
                    />
                  </div>
                  <div>{{ downData.nickname }}</div>
                </div>
                <div class="times flex_">
                  <img src="/static/time.png" class="img" alt="" />
                  {{ duration }}
                </div>
              </div>
              <div class="info_2">
                {{ downData.title }}
              </div>
              <div class="info_3">
                <div class="item flex_between">
                  <div class="downLeft flex_column">
                    <div class="text1">Bez vodoznaku</div>
                    <div class="text2">{{ WithoutVideoSize }}</div>
                  </div>
                  <div
                    class="downBtn flex_ccenter shou"
                    @click="
                      handleDownload(
                        downData.video_url,
                        'SavingTik-Without Watermark',
                        'video'
                      )
                    "
                  >
                    Stáhnout
                  </div>
                </div>
                <!-- <div class="item flex_between">
                  <div class="downLeft flex_column">
                    <div class="text1">Video Download</div>
                    <div class="text2">{{VideoSize }}</div>
                  </div>
                  <div class="downBtn flex_ccenter shou">Download</div>
                </div> -->
                <div class="item flex_between">
                  <div class="downLeft">
                    <div class="text1">Stáhnout MP3</div>
                  </div>
                  <div
                    class="downBtn flex_ccenter shou"
                    @click="
                      handleDownload(
                        downData.mp3_url,
                        'SavingTik-Download MP3',
                        'mp3'
                      )
                    "
                  >
                    Stáhnout
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="downStorySuccess_app" v-if="downStorySuccess">
        <div class="storyVideoInfo flex_between">
          <div class="downLeft flex_">
            <img :src="downData.avatar" class="img" alt="" />
            <div class="flex_column info">
              <div class="text1">
                {{ downData.title }}
              </div>
              <div class="text2">{{ downData.nickname }}</div>
            </div>
          </div>
        </div>
        <div class="allDown flex_ccenter" @click="allIn">Stáhnout All</div>
        <div class="storyImageList flex_between">
          <div
            class="item"
            @click.stop="previewImage(item, k)"
            :key="k"
            v-for="(item, k) in downData.images"
          >
            <img :src="item" class="img" alt="" />
            <div class="overlay">
              <div
                class="posi shou flex_center"
                @click.stop="handleDownload(item, 'SavingTik-Image', 'image')"
              >
                <img src="/static/appxiazai.png" class="xiazai" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="downSuccess_app flex_center" v-if="downSuccess">
        <div class="success_box">
          <div class="_video flex_between">
            <div class="bigImg flex_ccenter">
              <img :src="downData.cover" class="img" alt="" />
            </div>
            <div class="downInfo flex_column">
              <div class="info_1">
                <div class="tit flex_">
                  <div class="timg">
                    <img src="/static/point.png" class="img" alt="" />
                  </div>
                  <div class="uname">{{ downData.title }}</div>
                </div>
              </div>
              <div class="info_2">{{ downData.nickname }}</div>
              <div class="times flex_between">
                <div></div>
                <div>Čas — — {{ duration }}</div>
              </div>
            </div>
          </div>
          <div class="info_3">
            <div class="item flex_between">
              <div class="downLeft flex_column">
                <div class="text1">Bez vodoznaku</div>
                <div class="text2">{{ WithoutVideoSize }}</div>
              </div>
              <div
                class="downBtn flex_ccenter shou"
                @click="
                  handleDownload(
                    downData.video_url,
                    'SavingTik-Without Watermark',
                    'video'
                  )
                "
              >
                Stáhnout
              </div>
            </div>

            <div class="item flex_between">
              <div class="downLeft">
                <div class="text1">Stáhnout MP3</div>
              </div>
              <div
                class="downBtn flex_ccenter shou"
                @click="
                  handleDownload(
                    downData.mp3_url,
                    'SavingTik-Download MP3',
                    'mp3'
                  )
                "
              >
                Stáhnout
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="loading" v-if="isHttpLoading">
        <div class="loading-dots flex_center">
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
        <div class="tips flex_center">
          <div class="tip">
            <img src="/static/tip.png" class="img" alt="prompt" />
          </div>
          <div>Načítání dat, počkejte prosím několik sekund!</div>
        </div>
      </div>
      <div class="error flex_ccenter" v-if="httpError">
        <div class="hono flex_">
          <img src="/static/tishi.png" class="img" alt="prompt" />
          <div>ach ne~</div>
        </div>
        <div class="errMsg">
          Aktuální odkaz je chybný; zkopírujte prosím správný odkaz.
        </div>
      </div>
      <div class="declare">
        <div class="text_content font18" style="color: #fff">
          Pro ukládání obsahu TikTok do vašeho zařízení, včetně příběhů TikTok a
          videí TikTok, nabízí SavingTik komplexní řešení. Své oblíbené příběhy
          TikTok si můžete stáhnout zdarma bez vodoznaku pomocí naší aplikace,
          která je kompatibilní s iOS, Androidem a PC.
        </div>
      </div>
      <div class="next_content flex_ccenter">
        <div class="timeline_title flex_">
          <div class="timg">
            <img src="/static/blue.webp" class="img" alt="blue square" />
          </div>
          <h3 class="h3">
            Jak mohu použít Savingtik ke stažení příběhů TikTok?
          </h3>
        </div>
        <div class="timeline_content">
          <div class="section">
            <div class="section-upper flex_">
              <div class="section-left">
                <div class="current">1</div>
              </div>
              <div class="section-right">
                Vyhledejte odkaz na video příběh TikTok a zkopírujte jej.
              </div>
            </div>
            <div class="section-lower flex_">
              <div class="Group flex_center">
                <div class="section-left"></div>
              </div>
              <div class="section-right">
                Nejprve vyhledejte příběhové video, které chcete stáhnout na
                TikTok. U každého videa je možnost „Sdílet“. Je to možnost
                vpravo dole. Vyberte "Kopírovat odkaz" pro uložení adresy URL
                videa TikTok. Adresu URL lze také zkopírovat a vložit do
                webového prohlížeče.
              </div>
            </div>
          </div>
          <div class="flex_ccenter">
            <img
              src="/static/copy-the-tiktok-video-url.webp"
              class="sectionImg"
              alt="copy the TikTok video URL"
            />
          </div>
          <div class="section">
            <div class="section-upper flex_">
              <div class="section-left">
                <div class="current">2</div>
              </div>
              <div class="section-right">
                Využijte TikTok Story Downloader na Savingtiku.
              </div>
            </div>
            <div class="section-lower flex_">
              <div class="Group flex_center">
                <div class="section-left"></div>
              </div>
              <div class="section-right">
                Můžete kliknout na tuto stránku nebo navštívit SavinTik.com.
                Vložte zkopírovanou adresu URL do záhlaví stránky. Chcete-li
                vložit odkaz, použijte na mobilních zařízeních klávesovou
                zkratku Ctrl+V nebo tlačítko „Pastel“.
              </div>
            </div>
          </div>
          <div class="flex_ccenter">
            <img
              src="/static/paste-tiktok-video-url.webp"
              class="sectionImg"
              alt="paste TikTok video URL"
            />
          </div>
          <div class="section">
            <div class="section-upper flex_">
              <div class="section-left">
                <div class="current">3</div>
              </div>
              <div class="section-right">Klikněte na „Stáhnout“.</div>
            </div>
            <div class="section-lower flex_">
              <div class="Group flex_center">
                <div class="section-left"></div>
              </div>
              <div class="section-right">
                Vložte odkaz do svého prohlížeče a kliknutím na „Stáhnout“ stáhněte příběh TikTok v původní kvalitě bez vodoznaků.
              </div>
            </div>
          </div>
          <div class="flex_ccenter">
            <img
              src="/static/download-tiktok-story.webp"
              class="sectionImg"
              alt="download Tiktok story"
            />
          </div>
        </div>
        <div class="timeline_content_app">
          <div class="section">
            <div class="section-upper flex_">
              <div class="section-left">
                <div class="red-dot"></div>
              </div>
              <div class="section-right">
                1. Vyhledejte odkaz na video příběh TikTok a zkopírujte jej.
              </div>
            </div>
            <div class="section-lower flex_">
              <div class="section-right">
                Nejprve vyhledejte příběhové video, které chcete stáhnout na TikTok. U každého videa je možnost „Sdílet“. Je to možnost vpravo dole. Vyberte "Kopírovat odkaz" pro uložení adresy URL videa TikTok. Adresu URL lze také zkopírovat a vložit do webového prohlížeče.
              </div>
            </div>
          </div>
          <div class="flex_ccenter">
            <img
              src="/static/copy-the-tiktok-video-url.webp"
              class="sectionImg"
              alt="copy the TikTok video URL"
            />
          </div>
          <div class="section">
            <div class="section-upper flex_">
              <div class="section-left">
                <div class="red-dot"></div>
              </div>
              <div class="section-right">
                2. Využijte TikTok Story Downloader na Savingtiku.
              </div>
            </div>
            <div class="section-lower flex_">
              <div class="section-right">
                Můžete kliknout na tuto stránku nebo navštívit SavinTik.com. Vložte zkopírovanou adresu URL do záhlaví stránky. Chcete-li vložit odkaz, použijte na mobilních zařízeních klávesovou zkratku Ctrl+V nebo tlačítko „Pastel“.
              </div>
            </div>
          </div>
          <div class="flex_ccenter">
            <img
              src="/static/paste-tiktok-video-url.webp"
              class="sectionImg"
              alt="paste TikTok video URL"
            />
          </div>
          <div class="section">
            <div class="section-upper flex_">
              <div class="section-left">
                <div class="red-dot"></div>
              </div>
              <div class="section-right">3. Klikněte na „Stáhnout“.</div>
            </div>
            <div class="section-lower flex_">
              <div class="section-right">
                Vložte odkaz do svého prohlížeče a kliknutím na „Stáhnout“ stáhněte příběh TikTok v původní kvalitě bez vodoznaků.
              </div>
            </div>
          </div>
          <div class="flex_ccenter">
            <img
              src="/static/download-tiktok-story.webp"
              class="sectionImg"
              alt="download Tiktok story"
            />
          </div>
        </div>
      </div>
      <div class="declare declareapp flex_ccenter" style="padding: 20px">
        <div class="text_content" style="color: #f9224c">
          Poznámka: Všechny funkce můžete používat bez přihlášení do TikTok.
        </div>
      </div>
      <div class="table">
        <div class="table-title flex_ccenter">TikTok Story SavingTik</div>
        <div class="table-content flex_between">
          <div class="table-left">
            <div class="item flex_center">
              <div class="bgImg"></div>
              <div>Formát:</div>
            </div>
            <div class="item flex_center">
              <div class="bgImg"></div>
              <div>Kvalita:</div>
            </div>
            <div class="item flex_center">
              <div class="bgImg"></div>
              <div>Rychlost  stahování:</div>
            </div>
            <div class="item flex_center">
              <div class="bgImg"></div>
              <div>Stahovací  kvóta:</div>
            </div>
            <div class="item flex_center">
              <div class="bgImg"></div>
              <div>Cena:</div>
            </div>
            <div class="item flex_center">
              <div class="bgImg"></div>
              <div>Služby:</div>
            </div>
          </div>
          <div class="table-right">
            <div class="item flex_center">
              <div>MP4</div>
            </div>
            <div class="item flex_center">
              <div class="bgImg"></div>
              <div>Originální, nekomprimovaná</div>
            </div>
            <div class="item flex_center">
              <div class="bgImg"></div>
              <div>Rychlá</div>
            </div>
            <div class="item flex_center">
              <div class="bgImg"></div>
              <div>Neomezená</div>
            </div>
            <div class="item flex_center">
              <div>Zdarma</div>
            </div>
            <div class="item flex_center">
              <div class="bgImg"></div>
              <div>Status, Story & Short</div>
            </div>
          </div>
        </div>
      </div>
      <div class="benefits">
        <div class="beneTit flex_">
          <img src="/static/ub.webp" class="img" alt="advantages" />
          <div>Výhody online TikTok, které šetří příběh</div>
        </div>
        <div class="beneContent">
          <div class="col1 flex_">
            <div class="dian"></div>
            <div class="text">
              Když jsou příběhy staženy z TikTok, automaticky odstraňte vodoznak.
            </div>
          </div>
          <div class="col1 flex_">
            <div class="dian"></div>
            <div class="text">
              Funguje s počítači, tablety a mobilními zařízeními. Stahovač příběhů Savingtik TikTok je kompatibilní s většinou oblíbených webových prohlížečů, včetně Chrome, Firefox, Safari a Edge.
            </div>
          </div>
          <div class="col1 flex_">
            <div class="dian"></div>
            <div class="text">
              Keep TT Tales, oblíbený filmový formát MP4.
            </div>
          </div>
          <div class="col1 flex_">
            <div class="dian"></div>
            <div class="text">Uložit příběhy TT, populární video formát MP4.</div>
          </div>
          <div class="col1 flex_">
            <div class="dian"></div>
            <div class="text">vysoká rychlost stahování.</div>
          </div>
          <div class="col1 flex_">
            <div class="dian"></div>
            <div class="text">neomezené a bezplatné stahování.</div>
          </div>
        </div>
        <div class="benePosi">
          <!-- <img src="/static/ubmaks.png" class="img" alt="" /> -->
        </div>
      </div>

      <div class="faqs">
        <div class="flex_center">
          <h3 class="faq_title">- SavingTik FAQ a tipy -</h3>
        </div>
        <div class="faq_content">
          <div id="faq" itemscope="" itemtype="https://schema.org/FAQPage">
            <div
              itemprop="mainEntity"
              itemscope=""
              itemtype="https://schema.org/Question"
              class="faq_item shou"
              @click="changeFaqItemOpen(item, k)"
              :key="k"
              v-for="(item, k) in list"
            >
              <button style="width: 100%">
                <div class="itemTitle flex_between">
                  <h5 itemprop="name" class="tit">{{ item.title }}</h5>
                  <div class="imgs">
                    <div v-if="!item.isOpen" class="opentriangle"></div>
                    <div v-else class="closetriangle"></div>
                  </div>
                </div>
              </button>
              <div
                itemprop="acceptedAnswer"
                itemscope=""
                itemtype="https://schema.org/Answer"
              >
                <div
                  itemprop="text"
                  class="faq_text"
                  :class="item.isOpen ? '' : 'isBlock'"
                >
                  <template v-if="item.textContent">
                    {{ item.textContent }}
                  </template>
                  <ul v-else>
                    <li :key="i" v-for="(item1, i) in item.text">
                      {{ item1 }}
                    </li>
                  </ul>
                  <div v-if="item.b">
                    <b>{{ item.b.btit }}</b>
                    <div style="word-wrap: break-word">
                      {{ item.b.burl }}
                    </div>
                    <div>{{ item.b.btext }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <pc-footer></pc-footer>
      </div>
    </div>
    <div class="page_bottom flex_center">
      ©SavingTik.Com 2023 All Rights Reserved.
    </div>
    <article-content></article-content>
    <div class="app_page_bottom">
      <app-footer></app-footer>
    </div>
    <video src="" id="video" autoplay muted v-show="false"></video>
    <div class="dloading" v-if="dloading">
      <div class="loader"></div>
    </div>
    <van-popupapp ref="popupAppRef"></van-popupapp>
  </div>
</template>
    
    <script>
import dataList from "@/static/faqsStory.js";
import { handleClick } from "@/plugins/Firebase.js";
import CryptoJS from "crypto-js";
import { ImagePreview } from "vant";
import language from "@/components/language.vue";
import VanPopupapp from "@/components/vanPopupapp.vue";
import PcFooter from "@/components/pcFooter.vue";
import AppFooter from "@/components/appFooter.vue";
import ArticleContent from '~/components/articleContent.vue';

export default {
  components: { language, VanPopupapp, PcFooter, AppFooter, ArticleContent },
  head: {
    title: "TikTok Story Downloader – SavingTik",
    htmlAttrs: {
      lang: "cs",
    },
    bodyAttrs: {
      "data-lang": "cs",
    },
    meta: [
      { charset: "utf-8" },
      { property: "og:locale", content: "cs" },
      {
        name: "viewport",
        content:
          "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no",
      },
      { name: "robots", content: "index, follow" },
      { name: "revisit-after", content: "1 days" },
      {
        name: "description",
        content:
          "SavingTik : náš stahovač příběhů TikTok je k použití zdarma, bez jakýchkoli omezení nebo omezení. Stahujte snadno a užívejte si příběhy bez vodoznaků ve vysokém rozlišení.",
      },
      {
        itemprop: "name",
        content: "TikTok Story Downloader - SavingTik",
      },
      { name: "author", content: "SavingTik" },
      { name: "msvalidate.01", content: "" },

      { itemprop: "image", content: "/static/logo/savingtik-thumb.webp" },
      { name: "twitter:card", content: "summary" },
      { name: "twitter:title", content: "TikTok Story Downloader - SavingTik" },
      {
        name: "twitter:description",
        content:
          "SavingTik : náš stahovač příběhů TikTok je k použití zdarma, bez jakýchkoli omezení nebo omezení. Stahujte snadno a užívejte si příběhy bez vodoznaků ve vysokém rozlišení.",
      },
      {
        name: "twitter:image:src",
        content: "/static/logo/savingtik-thumb.webp",
      },
      { name: "twitter:site", content: "SavingTik" },
      { property: "og:title", content: "TikTok Story Downloader - SavingTik" },
      { property: "og:type", content: "article" },
      { property: "og:image", content: "/static/logo/savingtik-thumb.webp" },
      {
        property: "og:description",
        content:
          "SavingTik: náš stahovač příběhů TikTok je k použití zdarma, bez jakýchkoli omezení nebo omezení. Stahujte snadno a užívejte si příběhy bez vodoznaků ve vysokém rozlišení.",
      },
      { property: "og:site_name", content: "SavingTik" },
    ],
    link: [
      // Favicons
      {
        rel: "shortcut icon",
        href: "/static/logo/favicon.png",
        sizes: "512x512",
      },
      {
        rel: "apple-touch-icon",
        href: "/static/logo/favicon.png",
        sizes: "192x192",
      },
      //Apple Touch Icons

      //multilingual
      {
        rel: "alternate",
        hreflang: "x-default",
        href: "https://savingtik.com/cs/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "en",
        href: "https://savingtik.com/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "en-in",
        href: "https://savingtik.com/in/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "vi",
        href: "https://savingtik.com/vn/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "tr",
        href: "https://savingtik.com/tr/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "id",
        href: "https://savingtik.com/id/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "fr",
        href: "https://savingtik.com/fr/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "pt",
        href: "https://savingtik.com/pt/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "ru",
        href: "https://savingtik.com/ru/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "es",
        href: "https://savingtik.com/es/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "ms",
        href: "https://savingtik.com/ms/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "ko",
        href: "https://savingtik.com/ko/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "ja",
        href: "https://savingtik.com/ja/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "jv",
        href: "https://savingtik.com/jv/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "cs",
        href: "https://savingtik.com/cs/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "de",
        href: "https://savingtik.com/de/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "it",
        href: "https://savingtik.com/it/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "pl",
        href: "https://savingtik.com/pl/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "hu",
        href: "https://savingtik.com/hu/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "nl",
        href: "https://savingtik.com/nl/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "ro",
        href: "https://savingtik.com/ro/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "el",
        href: "https://savingtik.com/el/download-tiktok-story",
      },
      {
        rel: "canonical",
        href: "https://savingtik.com/cs/download-tiktok-story",
      },
    ],
  },
  name: "download-Story",
  data() {
    return {
      list: dataList.listCs,
      input: "",
      dloading: false,
      showAppRight: false,
      showLanguage: false,
      Language: "en_GB",
      isHttpLoading: false,
      downSuccess: false,
      downStorySuccess: false,
      httpError: false,
      downData: {},
      WithoutVideoSize: "",
      duration: "",
      VideoSize: "",
    };
  },
  mounted() {
    this.debouncedDownInput = this.debounce(this.downInput, 1000);
  },
  methods: {
    showAppRightHandel() {
      this.$refs.popupAppRef.open();
    },
    showLanguageHandel() {
      this.$refs.languageRef.close();
    },
    goToTop(type) {
      // 切换页面 action_page_switch
      handleClick("action_page_switch", {
        site: type,
        from: "top",
      });
    },
    goToTools(type) {
      // 切换页面 action_page_switch
      handleClick("action_page_switch", {
        site: type,
        from: "tools",
      });
    },
    debounce(fn, delay) {
      let timer;
      return function () {
        let context = this;
        let args = arguments;
        clearTimeout(timer);
        timer = setTimeout(() => {
          fn.apply(context, args);
        }, delay);
      };
    },
    downInput(e) {
      // 粘贴链接到输入框 action_tt_paste
      handleClick("action_tt_paste", {
        islink: e.target.value,
        from: "story",
      });
    },
    handleInput(e) {
      this.debouncedDownInput(e);
    },
    changeLanguage() {
      if (this.$i18n.locale == "en") {
        this.$i18n.setLocale("zh");
      } else {
        this.$i18n.setLocale("en");
      }
    },
    previewImage(item, k) {
      ImagePreview({
        images: this.downData.images,
        startPosition: k,
      });
    },
    sendDownload(event) {
      if (event.keyCode === 13 && !this.isHttpLoading) {
        this.Download();
        event.preventDefault();
        return false;
      }
    },
    async allIn() {
      // 设定 URL 数组
      //点击开始下载按钮 action_tt_download_start
      handleClick("action_tt_download_start", {
        site: "all",
        from: "story",
      });
      // 通过 map 返回一个 Promise 数组
      let promises = this.downData.images.map((url) =>
        this.handleDownloadImages(url)
      );

      // 等待所有 Promise 完成
      await Promise.all(promises);
      this.dloading = false;
    },
    async handleDownloadImages(src) {
      try {
        this.dloading = true;
        const response = await fetch(src);
        if (!response.ok) throw new Error("网络响应不好");
        const data = await response.blob();
        let url = window.URL.createObjectURL(data);
        let link = document.createElement("a");
        link.href = url;
        link.download = "SavingTik-" + new Date().getTime();
        document.body.appendChild(link);
        link.click();
        link.remove();
        // //开始下载 tt_download_start
        handleClick("tt_download_start", {
          site: "all",
          from: "story",
        });
      } catch (error) {
        this.dloading = false;
        console.error("捕获到错误: " + error);
      }
    },
    async handleDownload(src, fileName, type) {
      if (type == "image") {
        //点击开始下载 action_tt_download_start
        handleClick("action_tt_download_start", {
          site: "story",
          from: "story",
        });
      } else if (type == "video") {
        //点击开始下载 tt_download_start
        handleClick("action_tt_download_start", {
          site: "video",
          from: "story",
        });
      } else {
        //点击开始下载 tt_download_start
        handleClick("action_tt_download_start", {
          site: "mp3",
          from: "story",
        });
      }
      try {
        this.dloading = true;
        const response = await fetch(src);
        if (!response.ok) throw new Error("网络响应不好");
        const data = await response.blob();
        let url = window.URL.createObjectURL(data);
        let link = document.createElement("a");
        link.href = url;
        link.download = "SavingTik-" + new Date().getTime();
        document.body.appendChild(link);
        link.click();
        link.remove();
        this.dloading = false;
        if (type == "image") {
          //开始下载 tt_download_start
          handleClick("tt_download_start", {
            site: "story",
            from: "story",
          });
        } else if (type == "video") {
          //开始下载 tt_download_start
          handleClick("tt_download_start", {
            site: "video",
            from: "story",
          });
        } else {
          //开始下载 tt_download_start
          handleClick("tt_download_start", {
            site: "mp3",
            from: "story",
          });
        }
      } catch (error) {
        this.dloading = false;
        console.error("捕获到错误: " + error);
      }
    },
    encryptUrl(url, key, iv) {
      // DES 加密
      let encrypted = CryptoJS.DES.encrypt(
        `m=url&url=${encodeURIComponent(url)}`,
        CryptoJS.enc.Utf8.parse(key),
        {
          iv: CryptoJS.enc.Utf8.parse(iv),
          mode: CryptoJS.mode.CBC,
          padding: CryptoJS.pad.Pkcs7,
        }
      );
      // 转 Base64
      let base64String = encrypted.toString();
      // URL 编码
      let result = encodeURIComponent(base64String);
      // 最终结果
      return `https://savingtik.com/tt.php?v=${result}`;
    },
    decryptUrl(encryptedUrl, key, iv) {
      // URL 解码
      const decodedUrl = decodeURIComponent(encryptedUrl);

      // Base64 解码
      const parsedWordArray = CryptoJS.enc.Base64.parse(decodedUrl);

      // DES解密
      const decrypted = CryptoJS.DES.decrypt(
        {
          ciphertext: parsedWordArray,
        },
        CryptoJS.enc.Utf8.parse(key),
        {
          iv: CryptoJS.enc.Utf8.parse(iv),
          mode: CryptoJS.mode.CBC,
          padding: CryptoJS.pad.Pkcs7,
        }
      );
      return decrypted.toString(CryptoJS.enc.Utf8);
    },
    async Download() {
      // 早些返回以避免嵌套
      if (this.isHttpLoading || this.input === "") return;
      this.downData = {};
      this.httpError = false;
      this.downStorySuccess = false;
      this.downSuccess = false;
      const tiktokUrlPattern = new RegExp("^http(s|)://.*tiktok.com.*/.*$");
      if (!tiktokUrlPattern.test(this.input)) {
        //点击解析下载按钮 action_tt_detect_bottom
        handleClick("action_tt_detect_bottom", {
          site: "other",
          noislink: this.input,
          from: "story",
        });
        this.httpError = true;
        this.isHttpLoading = false;
        return;
      }
      //点击解析下载按钮 action_tt_detect_bottom
      handleClick("action_tt_detect_bottom", {
        site: "tt",
        from: "story",
      });
      //开始解析  tt_start_resolve
      handleClick("tt_start_resolve", {
        islink: this.input,
        from: "story",
      });
      this.isHttpLoading = true;

      try {
        let result = this.encryptUrl(this.input, process.env.DES_KEY, process.env.DES_IV);
        const response = await fetch(result, {
          method: "GET",
          headers: { "Content-Type": "application/json" },
        });
        let encryptedResponse = await response.text();
        let decryptedResponse = this.decryptUrl(
          encryptedResponse,
          process.env.DES_KEY,
          process.env.DES_IV
        ); // 使用你的解密函数
        let data = JSON.parse(decryptedResponse).data;
        // 检查数据是否存在
        if (!data) {
          this.httpError = true;
          this.isHttpLoading = false;
          return;
        }

        if (!data.images) {
          await this.fetchVideoAttributes(data);
          //解析成功  tt_resolve_success
          handleClick("tt_resolve_success", {
            site: "video",
            from: "story",
          });
        } else {
          this.downData = data;
          this.downStorySuccess = true;
          this.isHttpLoading = false;
          //解析成功  tt_resolve_success
          handleClick("tt_resolve_success", {
            site: "story",
            from: "story",
          });
        }
      } catch (error) {
        //解析失败  tt_resolve_fail
        handleClick("tt_resolve_fail", {
          reason: "Failed to fetch",
          islink: this.input,
          from: "story",
        });
        console.error(error);
        this.httpError = true;
        this.isHttpLoading = false;
      }
    },

    async fetchVideoAttributes(data) {
      try {
        const videoBlob = await fetch(data.video_url).then((res) => res.blob());
        this.WithoutVideoSize = `${(videoBlob.size / (1024 * 1024)).toFixed(
          2
        )} MB`;
        // const videoBlob1 = await fetch(this.input).then((res) => res.blob());
        // this.VideoSize  = `${(videoBlob1.size / (1024 * 1024)).toFixed(
        //   2
        // )} MB`;
        const video = document.getElementById("video");
        video.setAttribute("src", data.video_url);
        video.crossOrigin = "anonymous";
        video.innerHTML = `<source src=${data.video_url} type="audio/mp4" >`;

        await new Promise((resolve) =>
          video.addEventListener("canplaythrough", () => {
            this.duration = this.formatSeconds(video.duration);
            resolve();
          })
        );

        await new Promise((resolve) => {
          const image = new Image();
          image.onload = resolve;
          image.src = data.cover;
        });

        this.downData = data;
        this.isHttpLoading = false;
        this.downSuccess = true;
      } catch (error) {
        console.error(error);
        this.httpError = true;
        this.isHttpLoading = false;
      }
    },

    formatSeconds(seconds) {
      const hours = Math.floor(seconds / 3600);
      const minutes = Math.floor((seconds - hours * 3600) / 60);
      const secs = Math.floor(seconds % 60);

      // 使用模板字符串清理时间格式化
      const time = [
        hours ? (hours > 9 ? hours : `0${hours}`) : undefined,
        minutes > 9 ? minutes : `0${minutes}`,
        secs > 9 ? secs : `0${secs}`,
      ]
        .filter(Boolean)
        .join(":");

      return time;
    },
    changeFaqItemOpen(item, k) {
      item.isOpen = !item.isOpen;
    },
  },
};
</script>
    <style lang="scss" scoped>
@import "@/static/style/story.css";
.dloading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;

  .loader {
    width: 88px;
    height: 88px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .loader:before {
    content: "";
    width: 148px;
    height: 10px;
    background: #202a68;
    position: absolute;
    top: 116px;
    left: -27px;
    border-radius: 50%;
    animation: shadow324 0.5s linear infinite;
  }

  .loader:after {
    content: "";
    width: 100%;
    height: 100%;
    background: #202a68;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 4px;
    animation: jump7456 0.5s linear infinite;
  }

  @keyframes jump7456 {
    15% {
      border-bottom-right-radius: 3px;
    }

    25% {
      transform: translateY(9px) rotate(22.5deg);
    }

    50% {
      transform: translateY(18px) scale(1, 0.9) rotate(45deg);
      border-bottom-right-radius: 40px;
    }

    75% {
      transform: translateY(9px) rotate(67.5deg);
    }

    100% {
      transform: translateY(0) rotate(90deg);
    }
  }

  @keyframes shadow324 {
    0%,
    100% {
      transform: scale(1, 1);
    }

    50% {
      transform: scale(1.2, 1);
    }
  }
}
.loading-dots {
  position: relative;
  z-index: 999;
  margin-top: 70px;
}

.dot {
  background-color: #83818c;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 10px;
  animation: loading-animation 1.5s infinite;
}

.dot:nth-child(2) {
  animation-delay: 0.5s;
}

.dot:nth-child(3) {
  animation-delay: 1s;
}

@keyframes loading-animation {
  0%,
  80%,
  100% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.5);
  }
}
</style>